<template>
	<div style="margin-top: 10px;">
		<el-button type="primary"  @click="onNewClickHandler" size="mini">新建</el-button>
		<el-button type="success"  @click="onUploadClickHandler" size="mini">上传</el-button>
		<el-row style="margin-top: 10px;">
			<el-col :span="8" v-for="item in applicationList" :key="item.id">
				<div style="border:1px solid #ddd;height:100px;padding:5px;;background-color: white;position: relative;width:92%;margin-top: 10px;">
					<img style="width: 70px;height:70px;float: left;" :src="item.iconUrl">
					<div style="padding-left:80px;">
						<div>{{item.name}}</div>
						<div style="color: #999999;font-size: 14px;">{{item.description}}</div>
					</div>
					<div style="position: absolute;right:5px;bottom:5px;">
						<el-button size="mini" style="padding: 5px 5px;" type="warning" @click="onExportClickHandler(item)">导出</el-button>
						<el-button size="mini" style="padding: 5px 5px;" type="success" @click="onEditClickHandler(item)">编辑</el-button>
						<el-button size="mini" style="padding: 5px 5px;"  @click="onDeleteClickHandler(item)">删除</el-button>
					</div>
					<div style="clear: both;"></div>
				</div>
			</el-col>
		</el-row>
		<el-dialog title="应用维护" v-model="dialogVisible" width="50%">
			<el-row>
				<el-col :span="8" class="field-label">图片</el-col>
				<el-col :span="16">
					<img :src="currentImageUrl" style="width:64px;height:64px;" @click="onImageClickHandler"/>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8" class="field-label">编码</el-col>
				<el-col :span="16">
					<el-input v-model="code" size="mini"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8" class="field-label">名称</el-col>
				<el-col :span="16">
					<el-input v-model="name" size="mini"></el-input>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8" class="field-label">模块</el-col>
				<el-col :span="16">
					<el-checkbox-group v-model="moduleTypeListValue">
						<el-checkbox v-for="(item,index) in moduleTypeList" :key="index" :label="item.value">{{item.name}}
						</el-checkbox>
					</el-checkbox-group>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px;">
				<el-col :span="8" class="field-label">描述</el-col>
				<el-col :span="16">
					<el-input v-model="description" size="mini" type="textarea"></el-input>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onSaveClickHandler" size="small">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="导入" v-model="importDialogVisible" width="30%">
			<el-upload drag :action="uploadFileUrl" :on-success="onFileUploadSuccess">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip">只能上传xml文件</div>
			</el-upload>
		</el-dialog>
		<el-dialog title="图片选择" v-model="imageDialogVisible" width="50%" :append-to-body="true">
			<el-row>
				<el-col :span="4" v-for="(item,index) in imageList" :key="index">
					<img :src="item.iconUrl" style="width:64px;height:64px;" @click="onImageSelectHandler(item)"/>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script>
	import constants from '@/utils/constants.js';
	import restUtil from '@/utils/restUtil.js';
	export default {
		name: 'ApplicationPage',
		data() {
			return {
				applicationList: [],
				
				dialogVisible:false,
				
				icon:"",
				code:"",
				name:"",
				description:"",
				id:"",
				
				importDialogVisible:false,
				uploadFileUrl: constants.ROOT_URL + "webide/applicationpage/upload?X-Token="+window.localStorage.getItem("token"),
				
				moduleTypeList: [],
				moduleTypeListValue:[],
				
				currentImageUrl:"",
				imageDialogVisible:false,
				imageList:[],
			}
		},mounted() {
			this.init();
		},methods: {
			init(){
				var that = this;
				restUtil.getAction(this,"webide/applicationpage/init", null).then(
					function(response) {
						if (response.data.code == 1) {
							var applicationList=response.data.applicationList;
							for(var i=0;i<applicationList.length;i++){
								applicationList[i].iconUrl = constants.ROOT_URL + "webide/applicationpage/getApplicationIconContent?icon=" + applicationList[i].icon +
									"&X-Token=" + window.localStorage.getItem("token");
							}
							that.applicationList=applicationList;
							that.moduleTypeList=response.data.moduleTypeList;
						} else {
							that.$alert(response.data.message, '提示')
						}
				});
			},onNewClickHandler(){
				this.code="",
				this.name="",
				this.description="",
				this.id="";
				this.icon="classpath:com/codeoss/module/ir/assets/1.png";
				this.currentImageUrl=constants.ROOT_URL + "webide/applicationpage/getApplicationIconContent?icon="+this.icon+
									"&X-Token=" + window.localStorage.getItem("token");
				this.dialogVisible=true;
			},onSaveClickHandler(){
				this.dialogVisible=false;
				var moduleTypeList="";
				if(this.moduleTypeListValue.length>0){
					moduleTypeList=this.moduleTypeListValue.join(",");
				}
				var request={
					code:this.code,
					name:this.name,
					description:this.description,
					moduleTypeList:moduleTypeList,
					icon:this.icon,
					id:this.id
				};
				var that=this;
				restUtil.postAction(this,"webide/applicationpage/dataSave", request).then(
					function(response) {
						if (response.data.code == 1) {
							that.init();
						} else {
							that.$alert(response.data.message, '提示')
						}
				});
			},onEditClickHandler(item){
				this.code=item.code,
				this.name=item.name,
				this.description=item.description,
				this.id=item.id;
				this.icon=item.icon;
				if(item.moduleTypeList!=null){
					this.moduleTypeListValue=item.moduleTypeList.split(",");
				}else{
					this.moduleTypeListValue=[];
				}
				this.currentImageUrl=constants.ROOT_URL + "webide/applicationpage/getApplicationIconContent?icon="+this.icon+
									"&X-Token=" + window.localStorage.getItem("token");
				this.dialogVisible=true;
			},onExportClickHandler(item){
				window.open(constants.ROOT_URL + "webide/applicationpage/dataExport?code="+item.code+"&X-Token="+window.localStorage.getItem("token"));
			},onFileUploadSuccess(response){
				this.importDialogVisible=false;
				if(response.code==1){
					this.$alert("导入成功", '提示');
					this.init();
				}else{
					this.$alert(response.message, '提示');
				}
			},onUploadClickHandler(){
				this.importDialogVisible=true;
			},onDeleteClickHandler(item){
				var that = this;
				this.$confirm("确定要删除吗?", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					restUtil.postAction(this,"webide/applicationpage/dataDelete?code="+item.code).then(
						function(response) {
							if (response.data.code == 1) {
								that.init();
								that.$alert("删除成功", '提示');
							} else {
								that.$alert(response.data.message, '提示');
							}
						});
				}).catch(() => {
				
				});
			},onImageClickHandler(){
				if(this.imageList.length==0){
					var imageList=[];
					for(var i=1;i<=20;i++){
						var obj={};
						obj["iconUrl"]= constants.ROOT_URL + "webide/applicationpage/getApplicationIconContent?icon=classpath:com/codeoss/module/ir/assets/"+i+".png"+
									"&X-Token=" + window.localStorage.getItem("token");
						obj["fileName"]="classpath:com/codeoss/module/ir/assets/"+i+".png";
						imageList.push(obj);
					}
					this.imageList=imageList;
				}
				this.imageDialogVisible=true;
			},onImageSelectHandler(item){
				this.icon=item.fileName;
				this.currentImageUrl=constants.ROOT_URL + "webide/applicationpage/getApplicationIconContent?icon="+this.icon+
									"&X-Token=" + window.localStorage.getItem("token");
				this.imageDialogVisible=false;
			}
		},
	}
</script>

<style>
</style>
